<template>
  <!-- 查看日历弹窗 -->
  <div class="calenderDetails-box">
    <div class="con-box">
      <div class="filter-box">
        <div class="filter-1 betweenbox">
          <div class="filter-left betweenbox">
            <div class="startbox item">
              <span>所属地市：</span>
              <div class="input-box">
                <el-select v-model="formData.company" size="small" placeholder="请选择" filterable>
                  <el-option
                    v-for="item in CompanyList"
                    :key="item.value"
                    :label="item.name"
                    :value="item.code"
                  ></el-option>
                </el-select>
              </div>
            </div>
            <div class="endbox item">
              <span>变电站名称：</span>
              <div class="input-box">
                <el-select v-model="formData.substation" size="small" placeholder="请选择" filterable>
                  <el-option
                    v-for="item in SubstationList"
                    :key="item.value"
                    :label="item.name"
                    :value="item.code"
                  ></el-option>
                </el-select>
              </div>
            </div>
            <div class="endbox item">
              <span>年月份：</span>
              <div class="input-box">
                <el-date-picker v-model="formData.time" :clearable="false" :editable="false" type="month" placeholder="选择月"></el-date-picker>
              </div>
            </div>
          </div>
          <div class="filter-right centerbox">
            <el-button
              type="primary"
              @click="queryAuxRealtimeList"
              class="centerbox conditionQuryBtn"
              icon="el-icon-search"
            >查询</el-button>
          </div>
        </div>
      </div>
      <div class="table-box">
        <div class="date-box">
          <div class="theader-th betweenbox">
            <div class="week-box centerbox" v-for="(o,i) in weeknames" :key="i">
              <span>{{o}}</span>
            </div>
          </div>
          <div class="tbody-box">
            <div class="tbody-td startbox" v-for="(o,i) in newCalendar" :key="i">
              <p
                class="date-text centerbox"
                v-if="o.date"
                :style="{'background-color':getPlanStateColor(1)}"
              >
                <span>{{o.date}}</span>
              </p>
              <div class="cont-box colcenterbox ">
                <div class="box" >
                  <div
                    class="item centerbox "
                    @mouseenter="toMoreDetails('enter',v,i,b)"
                    @mouseleave="toMoreDetails('leave')"
                    
                    v-for="(v,b) in o.list"
                    :key="b"
                  >
                    <span class="itemText">{{v.JHMC }}</span>
                  </div>
                </div>
              </div>
              <!-- 弹窗 -->

              <div
                class="details-box"
                v-if="itemSelected===i"
                :style="{left:calenderItem_x,top:calenderItem_y}"
              >
                <div class="header-tr betweenbox">
                  <div class="centerbox">
                    <span>变电站名称</span>
                  </div>
                  <div class="centerbox">
                    <span>任务名称</span>
                  </div>
                  <div class="centerbox">
                    <span>巡视开始时间</span>
                  </div>
                  <div class="centerbox">
                    <span>计划类型</span>
                  </div>
                  <div class="centerbox">
                    <span>计划状态</span>
                  </div>
                  <div class="centerbox">
                    <span>巡视结果</span>
                  </div>
                </div>
                <div class="tbody-tr betweenbox">
                  <div class="centerbox">
                    <span>{{calendar_item_info.BDZMC}}</span>
                  </div>
                  <div class="centerbox">
                    <span>{{calendar_item_info.JHMC}}</span>
                  </div>
                  <div class="centerbox">
                    <span>{{calendar_item_info.ZYJSSJ}}</span>
                  </div>
                  <div class="centerbox">
                    <span>{{xjType[Number(calendar_item_info.XSLX)]}}</span>
                  </div>
                  <div class="centerbox">
                    <span>{{planStatus[Number(calendar_item_info.STATUS)]}}</span>
                  </div>
                  <div class="centerbox">
                    <span>{{xjResult[Number(calendar_item_info.XSJG)]}}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import Calendar from "z-calendar";
import { JointInspectionModule } from "@/store/modules/JointInspection";
import lodash from "lodash";
interface substationList {
  date: number;
  plan_state: number;
  list: Array<object>;
}
interface restype {
  date: number | string;
  dateString: string;
  month: string;
  year: string;
}
interface stateColorType {
  plan_state: number;
  color: string;
}
@Component({
  components: {},
})
export default class extends Vue {
    // 计划状态
  planStatus = {
    '': "全部",
    0: "未执行",
    1: "执行中",
    2: "已执行",
    3: "执行失败",
  };
  // 巡检结果
  xjResult = {
    0: "告警",
    1: "正常",
    2: "漏点",
    3: "无法识别",
    4: "人工识别",
    5: "预警",
  };
  // 巡检类型
  xjType = {
    0: "未知",
    1: "例行巡检",
    2: "自定义巡检",
    3: "专项巡检",
    4: "熄灯巡检",
    5: "特殊巡检",
  };
  // 下拉框单位名称
  get CompanyList() {
    let CompanyList = JointInspectionModule.CompanyList || [];
    return CompanyList;
  }
  // 下拉框变电站
  get SubstationList() {
    let SubstationList = JointInspectionModule.LocalCityList || [];
    return SubstationList;
  }
    //table表格相关事件数据
  tableData = [
    {
      SSDSMC: "",
      WHBZMC: "",
      BDZMC: "",
      YHZXPC: "",
      FXFS: "",
      YHDJ: "",
      YHZT: "",
      YHNR: "",
      YHMS: "",
      KNDZHG: "",
      FZRMC: "",
      JHZGRQ: "",
    },
  ];
  //1.蓝色代表巡检完成，2.白色代表未巡检，3.黑色代表已执行，4.橙色代表正执行中，5.无色代表无数据
  state_color: Array<any> = [
    {
      plan_state: 1,
      color: "#0000FF",
    },
    {
      plan_state: 2,
      color: "#29ABE2",
    },
    {
      plan_state: 3,
      color: "#000",
    },
    {
      plan_state: 4,
      color: "#FF871C",
    },
    {
      plan_state: 5,
      color: "",
    },
  ];
  // 从后台获取的数据
  calenderList: Array<substationList> = [
    {
      date: 5,
      plan_state: 1, //1.蓝色代表巡检完成，2.白色代表未巡检，3.黑色代表已执行，4.橙色代表正执行中,5.无色代表无数据
      list: [
        {
          substation_name: "110Kv舜玉变电站",
          plan_content: "110kV舜玉变电站列行检查",
          start_time: "2020/08/05",
          plan_type: "例行检查",
          plan_state: "未执行",
          inspection_result: "正常",
        },
        {
          substation_name: "220Kv舜玉变电站",
          plan_content: "220kV舜玉变电站列行检查",
          start_time: "2020/08/05",
          plan_type: "例行检查",
          plan_state: "未执行",
          inspection_result: "正常",
        },
      ],
    },
    {
      date: 6,
      plan_state: 2,
      list: [
        {
          substation_name: "110Kv舜玉变电站",
          plan_content: "110kV舜玉变电站列行检查",
          start_time: "2020/08/06",
          plan_type: "例行检查",
          plan_state: "未执行",
          inspection_result: "正常",
        },
        {
          substation_name: "220Kv舜玉变电站",
          plan_content: "220kV舜玉变电站列行检查",
          start_time: "2020/08/06",
          plan_type: "例行检查",
          plan_state: "未执行",
          inspection_result: "正常",
        },
      ],
    },
    {
      date: 7,
      plan_state: 3,
      list: [
        {
          substation_name: "110Kv舜玉变电站",
          plan_content: "110kV舜玉变电站列行检查",
          start_time: "2020/08/07",
          plan_type: "例行检查",
          plan_state: "未执行",
          inspection_result: "正常",
        },
        {
          substation_name: "220Kv舜玉变电站",
          plan_content: "220kV舜玉变电站列行检查",
          start_time: "2020/08/07",
          plan_type: "例行检查",
          plan_state: "未执行",
          inspection_result: "正常",
        },
      ],
    },
    {
      date: 8,
      plan_state: 4,
      list: [
        {
          substation_name: "110Kv舜玉变电站",
          plan_content: "110kV舜玉变电站列行检查",
          start_time: "2020/08/08",
          plan_type: "例行检查",
          plan_state: "未执行",
          inspection_result: "正常",
        },
        {
          substation_name: "220Kv舜玉变电站",
          plan_content: "220kV舜玉变电站列行检查",
          start_time: "2020/08/08",
          plan_type: "例行检查",
          plan_state: "未执行",
          inspection_result: "正常",
        },
      ],
    },
  ];

  city_value: string | null = "全部";
  substation_value: string = "全部";
  // year_value: string = "";
  month_value: Date = new Date();

  calendar_item_date: number | string = "";
  calendar_item_info: any = {};

  //搜索框from表单数据
  public formData = {
    company: "", // 所属地市ID
    substation: "", // 变电站ID
    time: "", // 时间
  };

  //日历中弹出小弹窗的开启关闭状态
  itemSelected: number = -1;
  calendar_monthList: Array<object> = [];

  // 日历详情查询中单条数据的div位置， 设定目的是hover时弹窗跟随移动
  calenderItem_x: number | string = 0;
  calenderItem_y: number | string = 0;
  weeknames: Array<string> = [
    "星期日",
    "星期一",
    "星期二",
    "星期三",
    "星期四",
    "星期五",
    "星期六",
  ];

  // @Watch("month_value", { immediate: false, deep: true })
  // getMonth_value(newVal: any) {
  //   this.getCalendarInfo();
  // }

  // 计算日历单元格对应数据
  calenderListFilter(date: any) {
    let res = this.calenderList.filter((k) => k.date == date);
    let result = res.length > 0 && res[0];
    return result;
  }

  // 计算日期背景颜色
  getPlanStateColor(index: number) {
    let objs = this.state_color.filter((o) => o.plan_state == index);
    let obj = objs.length > 0 && objs[0];
    let color = obj.color;
    return color;
  }
    // 查询当前表格数据
  queryAuxRealtimeList() {
    // console.log("this.formData:", this.formData);
    let nowDate: any = new Date();
    let month = nowDate.getMonth() + 1;
    let newmonth = month > 9 ? month : "0" + month;
    let ny = nowDate.getFullYear() + "-" + newmonth;
    this.formData.time = this.formData.time == "" ? ny : this.formData.time;
    let form = {
      bdzid: this.formData.substation, // 变电站ID
      ssds: this.formData.company, // 所属地市ID
      date: this.formData.time, // 执行日期
    };
    // 加载中
    let loading = this.$loading({
      lock: true,
      text: "拼命加载中，请稍后...",
      spinner: "el-icon-loading",
      background: "rgba(0,0,0,0.7)",
    });
    (this as any).$services
      .getTpglDate({ data: form, method: "get" })
      .then((result: any) => {
        loading.close();
        // console.log("result:", result);
        this.tableData = result.data;
        let data = result.data;
        // 将返回数据处理成日期对应list的格式；
        let dateObj = {};
        data.forEach((item) => {
          let key = item.ZYQSSJ || "";
          if (key) {
            key = key.slice(0, 10);
            key = key.replace(/-/g, "/");
            dateObj[key] = dateObj[key] || [];
            dateObj[key].push(item);
          }
        });
        this.dateObj = dateObj;
        // console.log(dateObj);
      })
      .catch((err: object) => {
        console.log(err);
        loading.close();
        this.$message({
          type: "warning",
          message: "服务器请求错误！",
        });
      });
  }
  //日历详情查询
  toMoreDetails(val: string, data: any, index: number, text_i: number): void {
    
    if (val == "enter") {
      this.itemSelected = index;
      this.calendar_item_info = data;
      let posi_index = [
        4,
        5,
        6,
        11,
        12,
        13,
        18,
        19,
        20,
        25,
        26,
        27,
        32,
        33,
        34,
        39,
        40,
        41,
      ];
      if (posi_index.includes(index)) {
        this.calenderItem_x = "-385%";
        this.calenderItem_y = "15%";
      } else {
        this.calenderItem_x = "95%";
        this.calenderItem_y = "15%";
      }
    } else {
      this.itemSelected = -1;
    }
  }

  dateObj: any = {};
  // 更新日历
  get newCalendar() {
    let calendar;
    let monthList;
    if (this.formData.time != "") {
      let obj = new (Calendar as any)(this.formData.time);
      monthList = obj.monthList;
    } else {
      var nowDate: any = new Date();
      var fullYear: any = nowDate.getFullYear();
      var month: string | number = nowDate.getMonth() + 1;
      month = month > 9 ? month : "0" + month;
      let obj = new (Calendar as any)(this.formData.time);
      monthList = obj.monthList;
    }
    // console.log("monthList:", monthList);
    monthList.forEach((arr) => {
      if (arr && arr.length) {
        arr.forEach((v) => {
          v.list = this.dateObj[v.dateString] || [];
        });
      }
    });
    // 打散数组
    let res: restype[] = [].concat.apply([], monthList);
    // 不足42个的时候，补齐42个
    if (res.length < 42) {
      let i = 42 - res.length;
      for (let x = 0; x < i; x++) {
        res.push({
          date: "",
          dateString: "",
          month: "",
          year: "",
        });
      }
    }
    // console.log("res:", res);
    calendar = res;
    // this.queryAuxRealtimeList();
    return calendar;
  }
  // 获取对应月日期的月历
  getCalendarInfo(): void {
    var nowDate: any = this.month_value;
    var fullYear: any = nowDate.getFullYear();
    var month: string | number = nowDate.getMonth() + 1;
    month = month > 9 ? month : "0" + month;

    const { monthList } = new (Calendar as any)(fullYear + "-" + month);
    // 打散数组
    let res: restype[] = [].concat.apply([], monthList);
    // 不足42个的时候，补齐42个
    if (res.length < 42) {
      let i = 42 - res.length;
      for (let x = 0; x < i; x++) {
        res.push({
          date: "",
          dateString: "",
          month: "",
          year: "",
        });
      }
    }
    this.calendar_monthList = res;
  }
  private mounted(): void {
    // (this as any).getCalendarInfo();
    this.queryAuxRealtimeList();
  }
}
</script>

<style lang="scss" scoped>
.calenderDetails-box {
  width: 100%;
  height: 650px;

  .con-box {
    height: calc(100% - 0.79rem);
    margin-top: 0.15rem;
    padding: 0 24px;
    .filter-box {
      height: 0.36rem;
      width: 100%;
      .subtitle-box {
        height: 0.18rem;
        .icon {
          width: 0.16rem;
          height: 0.18rem;
          background: url("../../../../../assets/img/JointInspection/xjjh_subtitle_icon.png")
            no-repeat center center;
          background-size: 100% 100%;
        }
        .name {
          font-size: 0.18rem;
          margin-left: 0.06rem;
        }
      }
      .filter-1 {
        height: 0.36rem;
        width: 100%;
        margin-top: 0.1rem;
        .filter-left {
          width: 80%;
          height: 100%;
          .item {
            width: 40%;
            font-size: 0.18rem;
          }
        }
        .filter-right {
          width: 20%;
          height: 100%;
          .conditionQuryBtn {
            // margin-left: 1.8rem;
          }
          .calender-query {
            width: 0.35rem;
            height: 0.3rem;
            margin-left: 0.2rem;
            background: url("../../../../../assets/img/JointInspection/calender_unfold_icon.png")
              no-repeat center center;
            background-size: 100% 100%;
            cursor: pointer;
            span {
              display: inline-block;
            }
          }
        }
      }
    }
    .table-box {
      height: calc(100% - 0.56rem);
      width: 100%;
      margin-top: 0.2rem;
      position: relative;
      .is-selected {
        color: #fff;
      }
      .date-box {
        width: 100%;
        height: 100%;
        position: relative;
        background-color: rgba(0, 0, 0, 0.1);
        border: 1px solid #0a82ba;
        border-top: 1px solid #fff;
        border-bottom: 1px solid #fff;
        .theader-th {
          width: 100%;
          height: 0.4rem;
          background: #174289;
          .week-box {
            width: 14.285%;
            height: 100%;
            color: #fff;
            font-size: 0.16rem;
            border-right: 1px solid #0a82ba;
          }
          .week-box:last-child {
            border-right: none;
          }
        }
        .tbody-box {
          width: 100%;
          height: calc(100% - 0.4rem);
          display: flex;
          place-content: flex-start space-between;
          flex-flow: row wrap;
          align-items: space-between;
          .tbody-td {
            width: 14.28%;
            height: 16.66%;
            border-bottom: 1px solid #fff;
            border-right: 1px solid #0a82ba;
            border-left: none;
            position: relative;
            .date-text {
              width: 0.3rem;
              height: 0.3rem;
              background: rgb(138, 134, 134);
              position: absolute;
              top: 0;
              right: 0;
              z-index: 1;
            }
            .cont-box {
              width: 100%;
              height: 100%;
              position: absolute;
              top: 0;
              left: 0;
              z-index: 1;
              padding: 5px auto;
              overflow: auto;
              .box {
                width: 100%;
                max-height: 100%;
                min-height: 50%;
                position: relative;
                display: flex;
                justify-content: center;
                align-items: center;
                .item {
                  width: 60%;
                  height: 0.26rem;
                  margin: 0.12rem 0;
                  cursor: pointer;
                  overflow: hidden;
                  span {
                    font-size: 0.16rem;
                  }
                }
                .itemText{
                  display: inline-block;
                  padding: 0.1rem;
                }
                .item:hover span {
                  color: #18b2fc;
                  font-size: 0.18rem;
                }
              }
            }
            .details-box {
              width: 8rem;
              // height: 0.8rem;
              position: absolute;
              top: 0;
              left: 0;
              z-index: 7;
              .header-tr {
                height: 0.4rem;
                width: 100%;
                background: #184b98;
                > div {
                  width: 23.3%;
                  height: 100%;
                  font-size: 0.18rem;
                  overflow: hidden;
                }
                > div:nth-child(2) {
                  width: 20%;
                }
                > div:nth-child(3) {
                  width: 15%;
                }
                > div:nth-child(4) {
                  width: 10%;
                }
                > div:nth-child(5) {
                  width: 10%;
                }
                > div:nth-child(6) {
                  width: 10%;
                }
              }
              .tbody-tr {
                // height: 0.4rem;
                width: 100%;
                background: #143385;
                > div {
                  width: 23.3%;
                  height: 100%;
                  font-size: 0.18rem;
                  overflow: hidden;
                  span {
                    padding: 0.09rem 0;
                  }
                }
                > div:nth-child(2) {
                  width: 20%;
                }
                > div:nth-child(3) {
                  width: 15%;
                }
                > div:nth-child(4) {
                  width: 10%;
                }
                > div:nth-child(5) {
                  width: 10%;
                }
                > div:nth-child(6) {
                  width: 10%;
                }
              }
            }
          }
          .tbody-td:nth-child(7n) {
            border-right: none;
          }
          .tbody-td:nth-child(36) {
            border-bottom: none;
          }
          .tbody-td:nth-child(37) {
            border-bottom: none;
          }
          .tbody-td:nth-child(38) {
            border-bottom: none;
          }
          .tbody-td:nth-child(39) {
            border-bottom: none;
          }
          .tbody-td:nth-child(40) {
            border-bottom: none;
          }
          .tbody-td:nth-child(41) {
            border-bottom: none;
          }
          .tbody-td:nth-child(42) {
            border-bottom: none;
          }
        }
      }
    }
  }
}
</style>
<style lang="scss">
.calenderDetails-box {
  // 选择框输入框的宽度
  .el-select .el-input .el-input__inner {
    width: 2.4rem;
    font-size: 0.18rem;
  }
  .el-date-editor.el-input,
  .el-date-editor.el-input__inner {
    width: 2.4rem;
    font-size: 0.18rem;
  }
  //   按钮样式
  .el-button {
    width: 1.1rem;
    height: 0.36rem;
    padding: 0;
  }

  // 日历自己定义样式
  .el-calendar {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    border: 1px solid #0a82ba;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    .el-calendar__body {
      width: 100%;
      height: 100%;
      .el-calendar-table {
        width: 100%;
        height: 100%;
      }
    }
  }
  .el-calendar__header {
    display: none;
  }

  .el-calendar-table thead {
    background: #174289;
  }
  .el-calendar-table thead th {
    border-right: 1px solid #0a82ba;
    padding: 0.11rem 0;
  }
  .el-calendar-table thead th:last-child {
    border-right: onne;
  }
  .el-calendar-table .el-calendar-day {
    padding: 0;
    height: 100%;
    width: 100%;
  }
  .el-calendar-table .el-calendar-day:hover {
    cursor: auto;
    background-color: rgba(0, 0, 0, 0.35);
  }
  .el-calendar-table td {
    height: 16.66%;
    border-bottom: 1px solid #fff;
    border-right: 1px solid #0a82ba;
    border-left: none;
  }
  .el-calendar-table tr td:first-child {
    border-left: none;
  }
  .el-calendar-table tr:last-child td {
    border-bottom: none;
  }
  .el-calendar-table tr:first-child td {
    border-top: none;
  }
  .el-calendar__body {
    padding: 0;
  }
  .el-calendar-table td.is-selected {
    background-color: rgba(0, 0, 0, 0.55);
  }
  .el-calendar-table td.is-today {
    color: #fff;
  }
  .calenderDetails-box .el-calendar-table td.is-selected {
    background-color: rgba(0, 0, 0, 0);
  }
}
</style>

